<template>
    <div>
        <fieldset> 
		<legend>
		<h3>投诉信息查询</h3></legend>
		密码：<el-input style="width:200px;" type="password" v-model="password" />
        商户订单号：<el-input style="width:200px;" v-model="orderNo" />
        商户订单号结尾：<el-input style="width:200px;" v-model="orderNoEnd" />
        姓名：<el-input style="width:200px;" v-model="uname" />
        电话：<el-input style="width:200px;" v-model="phone" />
		处理状态<el-select style="width:200px;" v-model="searchStatus">
			<el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
            </el-option>
		</el-select>
		<el-button size="mini" @click="searchData">查询</el-button>
		<div>
			<el-table  border  
					:data="content"
					stripe
					style="width: 100%" id="celltable">
					<el-table-column prop="phone" label="手机号" align="center"> </el-table-column>
					<el-table-column prop="uname" label="姓名" align="center">  </el-table-column>
					<el-table-column prop="addr" label="地址" align="center">  
						<template scope="scope">
							<a @click="alertmessage(scope.row.addr)">{{scope.row.addr}}</a>
						</template>
					</el-table-column>
					<el-table-column prop="orderNo" label="商户单号" align="center" width="230px;">  </el-table-column>
					<el-table-column label="图片" align="center">
						<template scope="scope">
							<a v-bind:href="scope.row.orderImageUrl" target="_blank"><img width='100px' height="100px;" v-bind:src="scope.row.orderImageUrl"/></a>
						</template>
					</el-table-column>
					<el-table-column prop="remark" label="用户备注信息" align="center">
						<template scope="scope">
							<a @click="alertmessage(scope.row.remark)">{{scope.row.remark}}</a>
						</template>
					</el-table-column>
					<el-table-column prop="status" label="状态" width="100px;" align="left">
                        <template scope="scope">
							<span v-if="scope.row.status == '1'">处理完毕</span>
                            <span v-if="scope.row.status == '-1'">已处理未完毕</span>
                            <span v-if="scope.row.status == '0'">未处理</span>
                            <span v-if="scope.row.status == '-2'">作废</span>
                            <span v-if="scope.row.status == '-3'">补发</span>
                            <span v-if="scope.row.status == '2'">用户已经撤销</span>
                            <span v-if="scope.row.status == '3'">退款</span>
						</template>
					</el-table-column>
					<el-table-column prop="cptag" label="处理备注" align="center"> </el-table-column>
					<el-table-column label="操作" width="230px;" align="left">
						<template scope="scope">
							<el-button size="mini" @click="opendg(scope.row.id)">变更状态</el-button>
						</template>
					</el-table-column>
			</el-table>
			<el-pagination background
					@size-change="handleSizeChange"
					@current-change="handleCurrentChange"
					:current-page="pageNo"
					:page-sizes="[10, 20, 50, 100]"
					:page-size="pageSize"
					layout="total, sizes, prev, pager, next, jumper"
					:total="total">
			</el-pagination>
		</div>
	</fieldset>


            <el-dialog
                title="变更状态"
                :visible.sync="dialogVisible"
                width="30%">
                <table>
                   
                    <tr>
                        <td style="width:50px;">状态：</td><td>  		
                            <el-select v-model="status">
                                <el-option
                                v-for="item in options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                                </el-option>
                            </el-select> 
                        </td>
                    </tr>
                     <tr>
                        <td>备注：</td><td>  <el-input style="width:400px" v-model="cptag" /> </td>
                    </tr>

                </table>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="dialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="updateMessage">确 定</el-button>
                </span>
            </el-dialog>
    </div>
</template>

<script>
    import  {searchCustomer,updateCustomerInfo} from '@/api/kz/kzapi.js'

    export default {
        data(){
            return {
                dialogVisible :false ,
                id : "" ,
                phone : '',
                uname : '',
                orderNo : '',
                orderNoEnd : '',
                password :'',
                cptag :'', 
                searchStatus :'', 
                status:'',
                content : [],
                pageNo: 0,
                pageSize:10,
                total : 0,
                options: [
                            {
                                value: '1',
                                label: '处理完毕'
                            }, 
                            {
                                value: '-1',
                                label: '已处理,未完毕'
                            }, 
                            {
                                value: '0',
                                label: '未处理'
                            }, 
                            {
                                value: '-2',
                                label: '作废'
                            }, 
                            {
                                value: '-3',
                                label: '补发'
                            }, 
                            {
                                value: '3',
                                label: '退款'
                            }
                        ]
            }
        },
        methods : {
            searchData : function(){
				this.fetchData(0,10);
			},
			handleSizeChange: function (size) {
		        this.pageSize = size;
		        this.fetchData(this.pageNo , size );
		    },
		    handleCurrentChange: function(pageNo){
                // console.log(pageNo)
		        this.pageNo = pageNo;
		        this.fetchData(pageNo,this.pageSize);
		    },
		    fetchData: function(pageNo,pageSize){
		    	var _this = this ;
		    	var data= {
		    		pageNo : pageNo ,
		    		pageSize : pageSize ,
					uname : _this.uname ,
					phone : _this.phone ,
                    orderNo  : _this.orderNo,
                    orderNoEnd :  _this.orderNoEnd,
					password : _this.password,
					status  : _this.searchStatus
		    	};
		    	searchCustomer(data).then((response)=>{
                   	this.$set(this,"content",response.data.content);
					this.$set(this,"total",response.data.total);
                }).catch((error)=>{
                    console.log(error);
                })
            },
            opendg : function(id){
				this.$set(this,"dialogVisible",true);
				this.$set(this,"status","");
                this.$set(this,"cptag","");
                this.$set(this,"id",id);
			},
			updateMessage: function(){
				var _this = this ;
				var data = {
					id : _this.id ,
					password : _this.password,
					status : _this.status ,
					cptag : _this.cptag 
                }
                updateCustomerInfo(data).then((response)=>{
                    if(response.data.succeed == true){
                        this.fetchData(0,10);
                        this.$set(this,"dialogVisible",false);
                    }else{
                        this.$message('提示:'+response.data.msg);
                    }	
                }).catch((error)=>{
                    console.log(error);
                })
			}
        }
    }
</script>